<template>
  <!-- 选择兴趣弹窗 -->
  <el-dialog v-model="isShowDialog" width="60%">
    <template #header>
      <div>
        <p class="dialog_p01">
          选择我的兴趣技能 <i>{{ scrollAttrList.length }}/7</i>
        </p>
      </div>
    </template>
    <el-form :inline="true" size="default" style="margin-top: 20px">
      <el-form-item>
        <el-input
          prefix-icon="ele-Search"
          v-model="searchName"
          placeholder="搜索兴趣技能"
          style="width: 300px"
        ></el-input>
        <el-button size="default" style="margin-left: 20px" @click="searchBtn">
          搜索</el-button
        >
      </el-form-item>
    </el-form>
    <span v-show="!scrollAttrList.length">推荐兴趣技能</span>
    <div v-show="scrollAttrList.length">
      <el-tag
        v-for="(item, index) in scrollAttrList"
        type="info"
        size="large"
        style="margin: 10px; width: 80px"
        :closable="true"
        @close="removeScrollAttrList(index)"
        >{{ item.name }}</el-tag
      >
    </div>
    <div
      infinite-scroll-distance="1"
      v-infinite-scroll="load"
      class="infinite-list"
      style="overflow: auto"
    >
      <el-tag
        type="info"
        size="default"
        class="infinite-list-item"
        :class="scrollAttrList.includes(i) ? 'active' : ''"
        v-for="i in interestList"
        :key="i.id"
        @click="addScrollAttrList(i)"
        >{{ i.name }}
      </el-tag>
    </div>
    <template #footer>
      <span>
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="danger" @click="saveBtn">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 搜索结果的弹窗 -->
  <el-dialog v-model="isSearch" width="60%">
    <template #header>
      <div>
        <h3 @click="resultSearchBtn">返回</h3>
      </div>
    </template>
    <el-form :inline="true" size="default" style="margin-top: 20px">
      <el-form-item>
        <el-input
          prefix-icon="ele-Search"
          placeholder="搜索兴趣技能"
          v-model="searchName"
          style="width: 300px"
        ></el-input>
        <el-button
          size="default"
          style="margin-left: 20px"
          @click="saveSearchName"
        >
          搜索</el-button
        >
      </el-form-item>
    </el-form>
    <h3>搜索结果</h3>
    <div class="result_div" v-show="searchList.length > 0">
      <div class="message_box" v-for="item in searchList">
        <div class="love">
          <ele-Star></ele-Star>
        </div>
        <div class="info">
          <span class="name">{{ item.name }} </span>
          <p class="more">{{ item.description }}</p>
        </div>
        <div class="add">
          <ele-Plus></ele-Plus>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Index",
});
</script>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import useInterestDialogState from "./hooks";
const InterestDialogState = useInterestDialogState();
const {
  cancelDialog,
  load,
  addScrollAttrList,
  removeScrollAttrList,
  searchBtn,
  resultSearchBtn,
  saveBtn,
  saveSearchName,
} = InterestDialogState;
const {
  isShowDialog,
  scrollAttrList,
  isSearch,
  interestList,
  searchList,
  searchName,
} = storeToRefs(InterestDialogState);
</script>
<style scoped lang="scss">
.el-dialog {
  .el-dialog__header {
    .dialog_p01 {
      font-size: 20px;
      i {
        margin-left: 6px;
        font-size: 12px;
        color: #666;
      }
      .dialog_span01 {
        font-size: 20px;
      }
    }
  }
  .el-dialog__body {
    padding-top: 0;
    .infinite-list {
      display: flex;
      justify-self: flex-start;
      align-items: center;
      flex-wrap: wrap;
      height: 300px;
      width: 100%;
      padding: 5px;
      margin: 5px;
      .infinite-list-item {
        width: 14%;
        text-align: center;
        padding: 20px 50px;
        margin: 10px;
      }
      .active {
        background-color: rgb(230, 47, 47);
        color: aliceblue;
      }
    }
  }
  .result_div {
    display: flex;
    justify-self: flex-start;
    flex-wrap: wrap;
    width: 100%;
    .message_box {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(213, 211, 211);
      margin: 12px;
      padding-top:8px ;
      svg {
        width: 20px;
        height: 20px;
      }
      .info {
        margin: 0 20px;
      }
    }
  }
}
</style>
